<template>
	<view id="server">
		<div class="serverCont">
			请大家按照要求进行预约哦～！
		</div>
		<div class="tabar">
			<tab @tabChangeType='tabChangeType' :moType='moType' :tabShow='moType'></tab>
		</div>
		<!-- 这里是tab对应的内容 -->
		<div class="serverList">
			<list :list='listOne' v-if="listShow" :tabIndex='moType'></list>
		</div>
	</view>
</template>

<script>
	import tab from './components/tab.vue'
	import list from './components/list.vue'
	export default {
		components: {
			tab,
			list
		},
		data() {
			return {
				list: {
					img: 'https://wx.sjcmhz.com/static/serve/dg.png',
					name: '灯光/美颜',
					time: [{
						num: 1,
						time: '09:00~10:00'
					}, {
						num: 1,
						time: '10:00~11:00 '
					}, {
						num: 1,
						time: '11:00~12:00 '
					}, {
						num: 1,
						time: '12:30 ~14:00'
					}, {
						num: 1,
						time: '14:00～15:00 '
					}, {
						num: 1,
						time: '15:00～17:20'
					}, {
						num: 1,
						time: '18:00～21:00 '
					}, {
						num: 1,
						time: '21:00～22:00'
					}, ]
				},
				/*
				声卡效果精修
				 */
				list1: {
					img: 'https://wx.sjcmhz.com/static/serve/sk.png',
					name: '声卡效果精修',
					time: [{
						num: 1,
						time: '09:00～09:30'
					}, {
						num: 1,
						time: '11:00～11:30 '
					}, {
						num: 1,
						time: '13:00～13:30 '
					}, ]
				},
				/*
				理发
	

				 */
				list2: {
					img: 'https://wx.sjcmhz.com/static/serve/lf.png',
					name: '理发',
					time: [{
						num: 1,
						time: '06:00～8:30'
					}, {
						num: 1,
						time: '09:00～11:30'
					}, {
						num: 1,
						time: '12:00～14:30 '
					}, {
						num: 1,
						time: '15:00～17:30  '
					}, {
						num: 1,
						time: '18:00～20:30'
					}, {
						num: 1,
						time: ' 21:00～23:30'
					}, ]
				},
				/*
				精细保洁

				 */
				list3: {
					img: 'https://wx.sjcmhz.com/static/serve/lf.png',
					img1: 'https://wx.sjcmhz.com/static/serve/wx.png',
					name: '精细保洁',
					name1: '设备报修',

					// 08:30～09:30          
					// 08:30～12:00  14:00～18:00   
					time: [{
							num: 1,
							time: '08:30～09:30 '
						}, {
							num: 1,
							time: '09:30~10:30'
						}, {
							num: 1,
							time: '10:30~11:30 '
						},

						{
							num: 1,
							time: '12:00~13:30  '
						},

						{
							num: 1,
							time: '13:30~15:00'
						}, {
							num: 1,
							time: '15:00~16:30'
						}, {
							num: 1,
							time: '16:30~18:00 '
						},
						{
							num: 1,
							time: '18:30~20:00'
						},
						{
							num: 2,
							time: '08:30～12:00 '
						},
						{
							num: 2,
							time: '14:00～18:00'
						},
						{
							num: 2,
							time: '18:30～20:00'
						}
					]
				},
				/*
				借衣服
				
				 */
				// 10:00～11:30 14:30～16:00 17:30～19:00 19:00～20:30
				list4: {
					img: 'https://wx.sjcmhz.com/static/serve/lf.png',
					name: '借衣服',
					time: [{
						num: 1,
						time: '10:00～11:30 '
					}, {
						num: 1,
						time: '14:30～16:00 '
					}, {
						num: 1,
						time: '17:30～19:00  '
					}, {
						num: 1,
						time: '19:00～20:30 '
					}]
				},
				listOne: [],
				listShow: true,
				moType:0
			};
		},
		onLoad(opt) {
		
		},
		onHide(){
			 console.log('页面被关闭了');
			uni.removeStorageSync('smoId')
			uni.setStorageSync('smoId',0)
		},
		onShow() {
			this.$utils.isLogin()
			this.listOne = this.list
			this.moType = uni.getStorageSync('smoId') || 0
			this.tabChangeType(this.moType)
			console.error('onShowonShowonShowonShowonShow',this.moType )
		},
		onLaunch() {
			 console.log('页面被关闭了');
			uni.removeStorageSync('smoId')
			uni.setStorageSync('smoId',0)
		},
		methods: {
			tabChangeType(v) {
				this.listShow = false
				switch (v) {
					case 0:
						this.listOne = this.list
						break;
					case 1:
						this.listOne = this.list1
						break;
					case 2:
						this.listOne = this.list2
						break;
					case 3:
						this.listOne = this.list3
						break;
					case 4:
						this.listOne = this.list4
						break;

				}
				this.listShow = true
				this.moType = v

				console.log("vv", v, this.listOne)
			}
		},
	};
</script>

<style lang="scss">
	.serverCont {
		width: 750rpx;
		height: 82rpx;
		background: #FFFFFF;
		font-size: 32rpx;
		color: #F5A623;
		line-height: 82rpx;
		padding: 0 40rpx;

	}

	.tabar {
		background: #fff;
		margin-top: 20rpx;
		padding: 32rpx 0;
	}

	.serverList {
		background: #fff;
		margin-top: 25rpx;
		margin-bottom: 50rpx;
	}
</style>